<template>
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
        <div class="banner-content">
            <h1 class="welcome-title">欢迎回来，{{ userInfo.nickname }}</h1>
            <p class="welcome-subtitle">校友会管理后台 · 连接母校，传承情谊</p>
        </div>
        <div class="banner-decoration">
            <el-icon class="decoration-icon"><School /></el-icon>
        </div>
    </div>

    <!-- 用户信息和统计数据 -->
    <el-row :gutter="20" class="main-container">
        <!-- 左侧用户信息 -->
        <el-col :xl="8" :lg="10" :md="24" :sm="24" class="left-column">
            <div class="user-info-card compact">
                <div class="card-title">
                    <el-icon><User /></el-icon>
                    <span>管理员信息</span>
                </div>
                <div class="user-profile compact">
                    <div class="avatar-container">
                        <el-image
                            :src="imgUrl"
                            class="admin-avatar compact"
                            fit="cover"
                        />
                        <div class="admin-badge">管理员</div>
                    </div>
                    <div class="user-details compact">
                        <div class="detail-item">
                            <span class="label">昵称：</span>
                            <span class="value">{{ userInfo.nickname }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="label">邮箱：</span>
                            <span class="value">{{ userInfo.email }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="label">权限：</span>
                            <div class="permissions">
                                <el-tag type="success" size="small">超级管理员</el-tag>
                                <el-tag type="primary" size="small">文章管理</el-tag>
                            </div>
                        </div>
                        <div class="detail-item motto-item">
                            <span class="motto">连接校友情谊，传承母校精神</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快速操作增强版 -->
            <div class="quick-actions-card compact">
                <div class="card-title">
                    <el-icon><Setting /></el-icon>
                    <span>管理中心</span>
                </div>

                <!-- 核心功能区 -->
                <div class="action-section compact">
                    <div class="section-title">核心功能</div>
                    <div class="action-grid compact">
                        <div class="action-item" @click="navigateToArticles">
                            <div class="action-icon article-icon">
                                <el-icon><Document /></el-icon>
                            </div>
                            <div class="action-info">
                                <span class="action-name">文章管理</span>
                                <span class="action-desc">发布与编辑</span>
                            </div>
                        </div>

                        <div class="action-item" @click="navigateToUsers">
                            <div class="action-icon user-icon">
                                <el-icon><User /></el-icon>
                            </div>
                            <div class="action-info">
                                <span class="action-name">用户管理</span>
                                <span class="action-desc">校友信息</span>
                            </div>
                        </div>

                        <div class="action-item" @click="navigateToComments">
                            <div class="action-icon comment-icon">
                                <el-icon><ChatDotRound /></el-icon>
                            </div>
                            <div class="action-info">
                                <span class="action-name">评论管理</span>
                                <span class="action-desc">互动内容</span>
                            </div>
                        </div>

                        <div class="action-item">
                            <div class="action-icon setting-icon">
                                <el-icon><Tools /></el-icon>
                            </div>
                            <div class="action-info">
                                <span class="action-name">系统设置</span>
                                <span class="action-desc">平台配置</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最近活动区 -->
                <div class="activity-section compact">
                    <div class="section-title">最近活动</div>
                    <div class="activity-list compact">
                        <div class="activity-item">
                            <div class="activity-dot new"></div>
                            <div class="activity-content">
                                <span class="activity-text">新增文章《校友返校活动》</span>
                                <span class="activity-time">2小时前</span>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-dot"></div>
                            <div class="activity-content">
                                <span class="activity-text">审核通过3条用户评论</span>
                                <span class="activity-time">5小时前</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>

        <!-- 右侧统计数据和图表 -->
        <el-col :xl="16" :lg="14" :md="24" :sm="24" class="right-column">
            <!-- 统计数据卡片 -->
            <el-row :gutter="16" class="statistics-row compact">
                <el-col :xl="6" :lg="12" :md="12" :sm="24">
                    <div class="statistic-card article-card" @click="navigateToArticles">
                        <div class="card-icon">
                            <el-icon><Document /></el-icon>
                        </div>
                        <div class="card-content">
                            <div class="statistic-number">{{ articleCount }}</div>
                            <div class="statistic-title">发布文章</div>
                        </div>
                    </div>
                </el-col>

                <el-col :xl="6" :lg="12" :md="12" :sm="24">
                    <div class="statistic-card like-card" @click="navigateToLikes">
                        <div class="card-icon">
                            <el-icon><Star /></el-icon>
                        </div>
                        <div class="card-content">
                            <div class="statistic-number">156</div>
                            <div class="statistic-title">点赞收藏</div>
                        </div>
                    </div>
                </el-col>

                <el-col :xl="6" :lg="12" :md="12" :sm="24">
                    <div class="statistic-card comment-card" @click="navigateToComments">
                        <div class="card-icon">
                            <el-icon><ChatDotRound /></el-icon>
                        </div>
                        <div class="card-content">
                            <div class="statistic-number">89</div>
                            <div class="statistic-title">评论互动</div>
                        </div>
                    </div>
                </el-col>

                <el-col :xl="6" :lg="12" :md="12" :sm="24">
                    <div class="statistic-card user-card" @click="navigateToUsers">
                        <div class="card-icon">
                            <el-icon><User /></el-icon>
                        </div>
                        <div class="card-content">
                            <div class="statistic-number">1205</div>
                            <div class="statistic-title">注册校友</div>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <!-- 折线图展示 -->
            <div class="chart-section">
                <div class="chart-container single">
                    <div class="chart-header">
                        <h4>用户增长趋势</h4>
                        <p class="chart-subtitle">过去6个月校友注册情况统计分析</p>
                    </div>
                    <div class="chart-content" ref="lineChartRef"></div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import {ArrowRight, Warning, School, Document, Star, ChatDotRound, User, InfoFilled, Setting, Plus, View, Tools} from '@element-plus/icons-vue'
import {ref, onMounted, nextTick} from 'vue'
import * as echarts from 'echarts'
import EChart from '@/components/Echart/Echart.vue'
import { storeToRefs } from 'pinia'

import useUserInfoStore from '@/stores/userInfo.js'
import {getPanelData} from '@/api/admin/panel'

const userInfoStore = useUserInfoStore();
const { info: userInfo } = storeToRefs(userInfoStore)

const articleCount = ref(0)

const countArticle = async () => {
    let result = await getPanelData();
    articleCount.value = result.data
}

countArticle()

// console.log(articleCount.value)

//用户头像地址
const imgUrl = ref(userInfoStore.info.userPic)

// 导航方法
const navigateToArticles = () => {
    // 导航到文章管理
    console.log('Navigate to articles')
}

const navigateToLikes = () => {
    // 导航到点赞管理
    console.log('Navigate to likes')
}

const navigateToComments = () => {
    // 导航到评论管理
    console.log('Navigate to comments')
}

const navigateToUsers = () => {
    // 导航到用户管理
    console.log('Navigate to users')
}

const lineChartRef = ref(null)

// 初始化图表
const initLineChart = () => {
    if (!lineChartRef.value) return

    const chart = echarts.init(lineChartRef.value)
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            backgroundColor: 'rgba(50, 50, 50, 0.9)',
            borderColor: '#667eea',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月'],
            axisLine: {
                lineStyle: {
                    color: '#e0e0e0'
                }
            },
            axisLabel: {
                color: '#666',
                fontSize: 12
            }
        },
        yAxis: {
            type: 'value',
            name: '注册人数',
            nameTextStyle: {
                color: '#666',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: '#e0e0e0'
                }
            },
            axisLabel: {
                color: '#666',
                fontSize: 12
            },
            splitLine: {
                lineStyle: {
                    color: '#f0f0f0',
                    type: 'dashed'
                }
            }
        },
        series: [{
            name: '校友注册数',
            data: [150, 230, 224, 318, 435, 1205],
            type: 'line',
            smooth: true,
            lineStyle: {
                color: '#667eea',
                width: 4
            },
            itemStyle: {
                color: '#667eea',
                borderWidth: 2,
                borderColor: '#fff'
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(102, 126, 234, 0.4)' },
                    { offset: 1, color: 'rgba(102, 126, 234, 0.05)' }
                ])
            },
            symbol: 'circle',
            symbolSize: 8,
            emphasis: {
                itemStyle: {
                    color: '#667eea',
                    borderColor: '#667eea',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: 'rgba(102, 126, 234, 0.5)'
                }
            }
        }]
    }
    chart.setOption(option)

    // 响应式调整
    window.addEventListener('resize', () => chart.resize())
}

onMounted(() => {
    nextTick(() => {
        initLineChart()
    })
})
</script>

<style scoped>
/* 欢迎横幅 - 压缩高度 */
.welcome-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 9px 20px;
    margin-bottom: 15px;
    color: white;
    position: relative;
    overflow: hidden;
    height: 65px;
    display: flex;
    align-items: center;
}

.banner-content {
    position: relative;
    z-index: 2;
}

.welcome-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-subtitle {
    font-size: 13px;
    margin: 0;
    opacity: 0.9;
}

.banner-decoration {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.15;
}

.decoration-icon {
    font-size: 50px;
}

/* 主容器 - 固定高度 */
.main-container {
    height: calc(100vh - 120px);
    overflow: hidden;
}

.left-column, .right-column {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 用户信息卡片 - 紧凑模式 */
.user-info-card.compact {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    flex: 0 0 auto;
}

.card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f8f9fa;
}

.user-profile.compact {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.avatar-container {
    position: relative;
    flex-shrink: 0;
}

.admin-avatar.compact {
    width: 65px;
    height: 65px;
    border-radius: 12px;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.admin-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 2px 1px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
}

.user-details.compact {
    flex: 1;
}

.detail-item {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.label {
    font-weight: 500;
    color: #7f8c8d;
    min-width: 40px;
}

.value {
    color: #2c3e50;
    font-weight: 500;
}

.permissions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.motto-item {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

.motto {
    font-style: italic;
    color: #95a5a6;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* 快速操作卡片 - 紧凑模式 */
.quick-actions-card.compact {
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    flex: 1;
    overflow-y: auto;
    max-height: 460px; /* 设置最大高度 */
}

.action-section.compact {
    margin-bottom: 16px;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #606266;
    margin-bottom: 16px;
    padding-left: 8px;
    position: relative;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
}

.action-grid.compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-item:hover {
    background: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.article-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.user-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.comment-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.setting-icon {
    background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
}

.action-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.action-name {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.2;
}

.action-desc {
    font-size: 12px;
    color: #7f8c8d;
    line-height: 1.2;
}

/* 最近活动样式 */
.activity-section.compact {
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
}

.activity-list.compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.activity-item:hover {
    background: #f8f9fa;
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    margin-top: 6px;
    flex-shrink: 0;
}

.activity-dot.new {
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.activity-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-text {
    font-size: 13px;
    color: #374151;
    line-height: 1.4;
}

.activity-time {
    font-size: 11px;
    color: #9ca3af;
}

/* 统计卡片 - 紧凑模式 */
.statistics-row.compact {
    margin-bottom: 0;
    flex: 0 0 90px;
}

.statistic-card {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin: 6px;
    height: 65px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 14px; /* 从16px减少到14px */
}

/* 不同卡片的主题色 */
.article-card {
    --card-border-color: #667eea;
}

.like-card {
    --card-border-color: #f093fb;
}

.comment-card {
    --card-border-color: #4facfe;
}

.user-card {
    --card-border-color: #43e97b;
}

.card-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 12px;
    background: var(--card-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.article-card .card-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.like-card .card-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.comment-card .card-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.user-card .card-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.card-content {
    flex: 1;
}

.statistic-number {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 4px;
}

.statistic-title {
    font-size: 13px;
    font-weight: 500;
    color: #7f8c8d;
}

/* 图表区域 - 单图表模式 */
.chart-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chart-container.single {
    background: white;
    border-radius: 12px;
    margin-top: 7px;
    padding: 20px;
    height: 100%;
    max-height: 455px; /* 设置最大高度 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
}

.chart-container.single .chart-header {
    margin-bottom: 14px; /* 从16px减少到14px */
    padding-bottom: 14px; /* 从16px减少到14px */
    border-bottom: 2px solid #f8f9fa;
    text-align: center;
}

.chart-container.single .chart-header h4 {
    font-size: 17px; /* 从18px减少到17px */
    font-weight: 600;
    color: #667eea; /* 修改标题颜色为主题色 */
    margin: 0 0 6px 0; /* 从8px减少到6px */
}

.chart-container.single .chart-subtitle {
    font-size: 12px; /* 从13px减少到12px */
    color: #95a5a6; /* 修改副标题颜色 */
    margin: 0;
}

.chart-container.single .chart-content {
    flex: 1;
    min-height: 250px; /* 从300px减少到250px */
}

/* 移除原有的charts-row样式 */
.charts-row.compact {
    display: none;
}

/* 响应式优化 */
@media (max-width: 1200px) {
    .main-container {
        height: auto;
        overflow: visible;
    }

    .left-column, .right-column {
        height: auto;
    }

    .chart-container.single {
        height: 300px;
    }

    .chart-container.single .chart-content {
        min-height: 280px;
    }
}

@media (max-width: 768px) {
    .welcome-banner {
        height: 55px;
        padding: 9px 16px;
    }

    .welcome-title {
        font-size: 16px;
    }

    .welcome-subtitle {
        font-size: 12px;
    }

    .main-container {
        height: auto;
    }

    .user-profile.compact {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .admin-avatar.compact {
        width: 60px;
        height: 60px;
    }

    .statistic-card {
        height: 75px;
        padding: 12px;
    }

    .statistic-number {
        font-size: 20px;
    }

    .card-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .chart-container.single {
        height: 300px;
        padding: 16px;
    }

    .chart-container.single .chart-content {
        min-height: 220px;
    }

    .chart-container.single .chart-header h4 {
        font-size: 16px;
    }

    .chart-container.single .chart-subtitle {
        font-size: 12px;
    }
}
</style>
